import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map, List} from 'immutable';

import {Col, Button} from 'antd';
import Image from 'components/Image'
import noop from 'util/noop';

@Relax
export default class SkuItem extends Component {
    static defaultProps = {
        sku: Map(),
        chooseGoods: List(),
        addGoods: noop,
        deleteChooseGoods: noop
    }

    render() {
        const {sku, chooseGoods} = this.props;

        let specs = '';
        if (!!sku.get('specs') && !sku.get('specs').isEmpty()) {
            specs = sku.get('specs').map(spec=>spec.get('specialValName')).join(' ')
        }

        let rest = {};
        if (!chooseGoods.filter(v=>v.get('skuId') == sku.get('skuId')).isEmpty()) {
            rest = {
                type: 'primary',
                icon: 'check'
            }
        }

        return (
            <Col span={6}>
                <div className="good-item" onClick={()=>this.chooseGoods()}>
                    <Button className="check-box" size="small" shape="circle" {...rest}/>
                    <div className="good-img">
                        <Image height={200} width={200} src={sku.getIn(['images', 0])} alt={sku.get('title')}/>
                    </div>
                    <div className="good-info">
                        <h4 title={sku.get('title')}>{sku.get('title')}</h4>
                        <p className="specs">{specs}</p>
                        <div className="clearfix">
                            <p className="price pull-left">&yen;{(sku.get('salePrice') || 0).toFixed(2)}</p>
                            <p className="stock pull-right">库存：{sku.getIn(['stock', 'stock'])}</p>
                        </div>
                    </div>
                </div>
            </Col>
        )
    }


    /**
     * 选择商品
     */
    chooseGoods() {
        const {addGoods, sku, chooseGoods, deleteChooseGoods} = this.props;
        if (chooseGoods.filter(v=>v.get('skuId') == sku.get('skuId')).isEmpty()) {
            addGoods(sku);
        } else {
            let index = chooseGoods.findIndex(goods=>goods.get('skuId') == sku.get('skuId'));
            deleteChooseGoods(index);
        }
    }
}